<!-- 信息确认 -->
<template>
	<!-- 总盒子 -->
	<view class="index-page">
		<view class="topbackground">
			<view class="header" :style="{ paddingTop: heightConfig.navBarPaddingTop + 'px' }">
				<view class="Narbar_bo">
					<view @click="back"><u-icon name="arrow-left"></u-icon></view>
					<view class="title" size="19px">信息确认</view>
					<view></view>
				</view>
			</view>
			<view class="box1" v-for="(item,index) in exaList">
				<view
					style="display: flex;justify-contentcenter;align-items: center; padding: 20rpx 0 20rpx 0; width: 100%;">
					<view style="width: 32rpx;height: 32rpx;">
						<image src="/static/images2/exame.png" style=" width: 100%;height: 100%;"></image>
					</view>
					<view class="namePhy">
                          体检人信息
					</view>
				</view>
				<view class="phyInfo" style="padding:32rpx 76rpx;">
					<view style="display: flex; align-items: center; margin-bottom: 24rpx; ">
						<text style="margin-right: 82rpx; font-size:  30rpx; ">体检人: </text> <input
							 v-model="form.name"  placeholder-style="font-size:20rpx;color:#AAAAAA;"
							focus placeholder="请输入体检人的真实姓名" />
					</view>
					<view style="display: flex;  align-items: center; margin-bottom: 24rpx; font-size: 30rpx;">
						<text style="margin-right: 82rpx; ">身份证: </text> <input class="uni-input" focus
							placeholder="请输入身份证号码" v-model="form.idNumber"
							placeholder-style="font-size:20rpx;color:#AAAAAA;" />
					</view>
					<view style="display: flex;  align-items: center; margin-bottom: 24rpx;  font-size: 30rpx;">
						<text style="margin-right: 82rpx;">手机号: </text> <input class="uni-input" focus
							placeholder="请输入手机号" v-model="form.phone"
							placeholder-style="font-size:20rpx;color:#AAAAAA;" />
					</view>
					<view style="display: flex; align-items: center; margin-bottom: 24rpx; font-size:  30rpx;">
						<text style="margin-right: 57rpx;">婚姻状况: </text>
						<u-radio-group v-model="form.marriage" :activeColor="'#159DFF'">
							<view>
								<u-radio :label="'已婚'" :name="0" :labelColor="'#777777'" :labelSize="12"></u-radio>
							</view>
							<view style="margin-left: 38rpx;">
								<u-radio :label="'未婚'" :name="1" :labelColor="'#777777'" :labelSize="12"></u-radio>
							</view>

						</u-radio-group>

					</view>
				</view>
				<!-- <view style="display: flex; justify-contentcenter;align-items: center;padding: 20rpx 0rpx 0rpx 28rpx; width: 100%;">
                    <view style="width: 32rpx;height: 32rpx;">
                        <image src="/static/images2/信息确认图标.png"
                            style="width: 100%;height: 100%;"></image>
                    </view>
                    <view class="namePhy">体检时间</view> -->

				<view
					style="display: flex;align-items: center; justify-content: space-between; padding: 20rpx 0 20rpx 0; width: 686rpx;">
					<view style="display: flex; position: relative; align-items: center;">
						<view style="width: 40rpx; height: 40rpx; display: flex; align-items: center;">
							<image src="/static/images2/endTime.png"
								style=" width: 32rpx;height: 32rpx; position: absolute;"></image>

						</view>

						<view style="font-weight: 560;"> 到检时间</view>

					</view>

					<view @click="dataSelect" style="width:160rpx; float: right;  display: flex; align-items: center;">


						<text style="float: right; color: #777777;">选择日期</text>
						<view style="margin-left: 20rpx;">
							<u-icon bold name="arrow-right" color="#878787" size="15"></u-icon>
						</view>



					</view>
				</view>

			</view>
			<view class="box">
				<scroll-view class="scroll-view_H" scroll-x="true" :scroll-into-view="item">
				<view  @click="dataSelect" class="scroll-view-item_H"   :style="{border: activeIndex2 === index ? '2rpx solid #159DFF' : ''}" :id=" 'item'+ index" v-for="(item,index) in loopWeek" :key="index" >
					<view class="list-box" style="padding-bottom: 20rpx;">

						<view class="image">{{getWeek(item)}}</view>
						<view class="text" style="font-size: 28rpx;">{{getMonDay(item)}}</view>
					<!-- 	<text class="text" style="color: #23A2FF;">{{item.isReducible ? '无号' : '有号'}}</text> -->
					</view>
				</view>
				
                </scroll-view>
             <view class="" style="width: 100%; margin:0 0 0 0rpx;font-size: 24rpx;color: #FE7A3E;">
             	<view style="width: 100%; color: black; margin-left: 20rpx; margin-bottom: 20rpx;">预约时间:<text
             			style="margin-left: 10rpx; color: #8a8a8a;">{{orderData.date ?  oppoinTime() : ''}}</text>
             	</view>
             	<view style="text-align: center;">已为您自动定位到最近可约日期</view>
             </view>

				
			</view>

			<view
				style="display: flex;justify-contentcenter;align-items: center;padding: 20rpx 0 20rpx 32rpx; width: 100%;">
				<!-- <view style="width: 32rpx;height: 32rpx;">
                    <image src="/static/images2/信息确认图标.png" style="width: 100%;height: 100%;"></image>
                </view>
                <view class="namePhy" style="margin-left: 15rpx;">默认体检时间</view> -->
				<view style="width: 32rpx;height: 32rpx;">
					<image src="/static/images2/Confirm.png" style=" width: 100%;height: 100%;"></image>
				</view>
				<view class="namePhy">
					确认体检项目
				</view>
			</view>
			
			<view class="bottom"> 
				<view class="list" >
					<view class="one">
						<image  style="width: 250rpx; height: 185rpx;" :src="url+orderData.meal.imagePath.split(',')[0]"></image>
					</view>
					<view class="two" style="margin-left: 10rpx;">
						<view class="center1">
							{{orderData.meal.setMealName}}
						</view>
						<view class="center2">
							{{orderData.meal.packageDescription}}
						
						</view>
					</view>
					<view class="three">
						<view class="right1">¥{{orderData.money}}</view>
						<!-- <view class="right2" @click="appointMent">
                            <view class="text">点击预约</view>
                        </view> -->
					</view>
					<!-- </view> -->
				</view>
			</view>

			<view class="" style="display:flex;">
				<view class="shiJiFukuan" style="margin:54rpx 0 0 44rpx;">
					实际付款
				</view>
				<view class="fuKuan" style="margin:52rpx 0 0 460rpx;">
					¥{{orderData.money}}
				</view>
			</view>
			<view class="buttonClick">
				<view class="buttonPay">
				
				</view>
				<view class="payPre" @click="payMent">
					<view class="button">
						确定预约
					</view>
				</view>
			</view>


		</view>



	</view>
</template>

<script>
	import {baseUrl} from "@/config.js"
	import order from "@/api/order.js"
	import mine from "@/api/mine.js"
	export default {
		name: "Index",
		components: {},
		data() {
			return {
				radiovalue1: '已婚',
                url:"",
				activeIndex:null,
				activeIndex2:0,
				item:"",
				axtiveIndex:0,
				exaList: [{
					id: 1,
					name: "张三",
					setMeal: "快速入职体检套餐 (男)",
					time: "2025.4.18 19:57",
					number: "FDSTIDEHED0023",
					result: "1",
					restultStatus: "已出结果",
				}],
				heightConfig: {},
				orderData: {},
				loopWeek:[],
				oldDate:"",
				orderNo: null,
				seleDateId:null,
				form: {
					name: "",
					idNumber: "",
					phone: "",
					age: 0,
					dateOfBirth: "",
					marriage: 0
				},
				formData: {
					name:"",
					sfz: "",
					phone: "",
					isMarried: null
				},
				timeData: {
					id: null,
					examinerInfoId: null,
					scheduleCapacityId: null
				}
			};
		},

	   async onLoad(opstions) {
		    
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.heightConfig.navBarPaddingTop = res.statusBarHeight // 单位：px
				
				}
			})
          console.log(opstions)
			if (opstions.orderNo) {
				this.orderNo = opstions.orderNo
				
			}else{
				//查询订单
				const res = await order.getOrderList({
					orderNo: opstions.data
				})
				this.orderData = res.rows[0]
			}
			
			this.timeData.id = Number(opstions.id)
		},
	   onShow() {
			uni.$on('updateData',async (data) => {
               
				//this.timeData = data.capacityId
				console.log("时间选择", data)
				this.activeIndex = data.index
				this.activeIndex2 = data.index2
				this.timeData.scheduleCapacityId = data.capacityId
				//数据回显
				this.orderData.date = data.year
				console.log(this.activeIndex2,"数组")
				this.orderData.startTime = data.startTime
				this.orderData.endTime = data.endTime
				const res2 = await mine.getOpenDayList({})
				res2.rows.forEach((item,index)=>{
					 if(this.orderData.date == item.date){
						 
						   this.item = "item" + this.activeIndex2
						   this.axtiveIndex = index
						   
					 }
				})
					this.getByTimeId()
			})
		},
		onReady() {},
		computed: {

		},
		async mounted() {
			 this.url = baseUrl
			 const res = await mine.getOpenDayList({})
			 //处理数据
			 console.log(res.rows,"开放日")
		    res.rows= this.mergeData(res.rows)
			 //将数据存储至本地
			uni.setStorageSync('date', JSON.stringify(res));
			 this.loopWeek = res.rows 
			if (this.orderNo) {
				//查询订单
				const res = await order.getOrderList({
					orderNo: this.orderNo
				})
				this.orderData = res.rows[0] 
				this.oldDate =  this.orderData.date+ this.orderData.startTime+this.orderData.endTime;
				console.log(this.orderData)
				this.form = res.rows[0].examinerInfo
				//this.$u.toast("进入错误!")
				this.timeData.id = res.rows[0].id 
			    const res2 = JSON.parse(uni.getStorageSync('date'))
				res2.rows.forEach((item,index)=>{
					 if(res.rows[0].date == item.date){
					
						 this.item = "item" + index
						 this.activeIndex2 = index
						  this.axtiveIndex = index
						  return 
					 }
				})
				
		
				//获取预约时间id
				this.getByTimeId()
			}
            	
		},
		methods: {
			// 合并逻辑
		 mergeData(data) {
			    const mergedMap = {};
			
			    // 遍历原始数据
			    data.forEach(item => {
			        const dateKey = item.date; // 日期作为键
			        if (!mergedMap[dateKey]) {
			            mergedMap[dateKey] = {}; // 初始化为空对象
			            // 复制除 timeVoList 以外的字段
			            mergedMap[dateKey] = { ...item };
			            mergedMap[dateKey].timeVoList = []; // 初始化 timeVoList 为空数组
			        }
			        mergedMap[dateKey].timeVoList.push(...item.timeVoList); // 将 timeVoList 合并
			    });
			
			    // 转换为最终格式
			    const result = Object.values(mergedMap);
			
			    return result;
			},
			getWeek(item) {
				return this.getDayOfWeek(item.date)
			},
			getMonDay(item) {
				return this.formatDate(item.date)
			},
			getDayOfWeek(dateString) {
				// 将输入的字符串解析为 [year, month, day] 格式
				const [year, month, day] = dateString.split('-').map(Number);
			
				if (isNaN(year) || isNaN(month) || isNaN(day)) {
					throw new Error('Invalid date format. Please provide a valid YYYY-MM-DD string.');
				}
				const date = new Date(year, month - 1, day);
				const daysOfWeek = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
				return daysOfWeek[date.getDay()];
			},
			oppoinTime() {
				// 确保 orderData 已经定义并包含所需字段
				const {
					date,
					startTime,
					endTime
				} = this.orderData;

				// 拼接字符串，假设 startTime 和 endTime 是字符串
				return `${date}-${startTime}-${endTime}`;
			},
			formatDate(inputDate) {
				// 检查输入是否为有效日期字符串
				if (!inputDate || typeof inputDate !== 'string') {
					throw new Error('请输入有效的日期字符串，格式为 "YYYY-MM-DD"');
				}
			
				// 按照 "-" 分割日期字符串
				const parts = inputDate.split('-');
			
				// 确保分割后长度为 3（年、月、日）
				if (parts.length !== 3) {
					throw new Error('日期格式无效，请使用 "YYYY-MM-DD" 格式');
				}
			
				// 提取月份和日期部分
				const month = parts[1]; // 月份
				const day = parts[2]; // 日期
			
				// 返回格式化的结果
				return `${month}/${day}`;
			},
			 getByTimeId() {
			    const res = JSON.parse(uni.getStorageSync('date'))
				res.rows.forEach((item, index) => {
					if (item.date === this.orderData.date) {
						item.timeVoList.forEach((Item, index) => {

							if (Item.startTime == this.orderData.startTime && Item.endTime == this
								.orderData.endTime) {
									
								this.timeData.scheduleCapacityId = Item.capacityId
								this.seleDateId =  Item.capacityId
								return
							}

						})
					}
				})
			},
			appointMent() {
				uni.navigateTo({
					// url: "/subPages/hosPacDetails/hosPacDetails",
					url: "/subPages/meaDetail/meaDetail",
				})
			},
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			async payMent() {
				if (this.orderNo) {
					//获取体检人信息
					if(!this.form.name.trim() || !this.form.idNumber.trim()) return this.$u.toast("请输入体检人姓名或者身份证号")
					const res = await mine.getExameInfo()

					this.timeData.examinerInfoId = res.rows[0].id
					this.form.id = res.rows[0].id
					//修改体检人信息
					
					const info = await mine.setExameInfo(this.form)
				 
			        	this.$u.toast("体检人信息修改成功!")
					
                    if(this.orderData.date + this.orderData.startTime + this.orderData.endTime!=this.oldDate){
						this.timeData.scheduleCapacityId =  this.seleDateId;
						// console.log(this.timeData.scheduleCapacityId,this.timeData,"日期id")
						const appoData = await order.orderTime(this.timeData)
						// console.log(appoData, "修改订单时间")
						this.$u.toast("预约时间修改成功!")
					}
					uni.$emit('update')
					uni.$emit('updateData3')
					setTimeout(()=>{
						 uni.navigateBack({
						 	delta: 1, 
						 })
					},800)
				
					
				} else {
					//新增体检人信息
					if(!this.form.name.trim()) return  	this.$u.toast("请输入体检人姓名")
					if(!this.orderData.date){
		             return this.$u.toast("请选择预约时间!")
					}
					const info = await mine.addExameInfo(this.form)
                    if(info.code == 200){
						
						//获取体检人信息
						const res = await mine.getExameInfo()
						
						this.timeData.examinerInfoId = res.rows[0].id
						console.log(this.timeData)
						const appoData = await order.orderTime(this.timeData)
						this.$u.toast("预约成功!")
						// console.log(appoData, "预约结果")
						setTimeout(()=>{
							 uni.navigateTo({
							     url: "/subPages/aAppointment/aAppointment",
							 })
						},800)
					}
					
					// console.log(this.form, "表单信息")
					// console.log(this.timeData, "表单信息")
				}

			},
			dataSelect() {
			
				uni.navigateTo({
					url: `/subPages/appointMent/appointMnetDataSele?index=${this.activeIndex}&secondParam=${this.activeIndex2}&order=${encodeURIComponent(JSON.stringify(this.orderData))}`,
				})
			}
		},
	};
</script>

<style lang="less" scoped>
	.scroll-Y {
		height: 300rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 686rpx;
	    box-sizing: border-box;
        overflow: hidden;
	 }
	.scroll-view-item {
		height: 300rpx;
		width: 20rpx !important;
		margin: 0 !important;
		line-height: 300rpx;
		font-size: 36rpx;
		
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 160rpx;
		height: 200rpx;
		border-radius: 20rpx;
		padding-top: 60rpx;
		box-sizing: border-box;
		background-color: #EFF7FD ;
		margin-right: 40rpx;
		text-align: center;
		font-size: 36rpx;
	}
	/deep/ input ::placeholder {
		font-size: 14px;
		/* 设置 placeholder 字体大小 */
		color: #999;
		/* 设置 placeholder 字体颜色 */
	}

	.no-border {
		border: none;
		/* 隐藏边框 */
		outline: none;
		/* 移除聚焦时的默认边框 */
	}

	.topbackground {
		width: 100%;
		height: 338rpx;
		width: 750rpx;
		height: 1624rpx;
		background: #F7F8FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.index-page {
		width: 750rpx;
		height: 100vh;
		overflow-y: scroll;
		background: #F7F8FA;
		box-sizing: border-box;

		.Narbar_bo {
			width: 100%;
			height: 35px;
			display: flex;
			padding: 0 28rpx;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 18px;
				font-weight: 600;
			}
		}
	}

	.avator {
		margin: 42rpx 0 0 52rpx;
		width: 90rpx;
		height: 90rpx;
		background: #C1D0FF;
		border-radius: 98rpx 98rpx 98rpx 98rpx;
	}

	.namePhy {
		margin-left: 10rpx;
		// display: inline-block;vertical-align: middle;
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;

		// width: 168rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 550;
		font-size: 28rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.text1 {
		padding: 42rpx 0 0 76rpx;
		width: 130rpx;
		height: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.text2 {
		padding-left: 82rpx;
		white-space: nowrap;
		width: 220rpx;
		height: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #AAAAAA;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.box1 {
		margin: 16rpx 0 0 32rpx;
		// border:1rpx solid black;
		// width: 686rpx;
		// height: 358rpx;
		// background: #FFFFFF;
		// border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.phyInfo {
		// margin: 0rpx 0 0 28rpx;
		width: 686rpx;

		height: 300rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.box {
		margin: 0 32rpx;
		width: 686rpx;
		height: 340rpx;
		background: #FFFFFF;
		padding: 10rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
       
		.xh {
			flex: 1;
			max-width: 25%;
			min-width: 25%;

			.list-box {

				margin-top: 18rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				width: 134rpx;
				height: 160rpx;
				background: #EFF7FD;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				// margin-bottom: 30rpx;


				.text {
					font-size: 28rpx;
					margin-top: 4rpx;
					// font-size: 24rpx;
					font-family: PingFang SC;
					color: #333333;
				}

				.image {
					font-size: 28rpx;
					font-weight: 560;
					margin-top: 16rpx;
					height: 68rpx;
					width: 68rpx;
				}
			}
		}
	}

	.bottom {
		// margin-top: 32rpx;
		// width: 750rpx;
		// height: 1206rpx;
		// background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.hotComm {
		padding: 30rpx 0 14rpx 32rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 148rpx;
		height: 52rpx;
		font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
		font-weight: 400;
		font-size: 40rpx;
		color: #333333;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}


	// .box {
	//     width: 750rpx;
	//     height: 1624rpx;
	//     background: #F7F8FA;
	// }

	.list {
		display: flex;
		margin: 0rpx 32rpx 0;
		// border: 1rpx solid black;
		width: 686rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.onge {
		width: 193rpx;
		height: 150rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		image {
			width: 193rpx;
			height: 150rpx;
		}
	}
	.center1 {
		margin-top: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		// text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.center2 {
		margin-top: 10rpx;
		width: 300rpx;
	
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #777777;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.right1 {
		margin: 70rpx 0rpx 0 25rpx;
		width: 110rpx;
		height: 36rpx;
		font-family: Douyin Sans, Douyin Sans;
		font-weight: bold;
		font-size: 30rpx;
		color: #EB5432;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	// .right2 {

	//     margin: 42rpx 0 0 0;
	//     width: 146rpx;
	//     height: 52rpx;
	//     background: #159DFF;
	//     border-radius: 74rpx 74rpx 74rpx 74rpx;
	//     display: flex;
	//     align-items: center;
	//     justify-content: center;
	// }

	// .text {
	//     // text-overflow: ellipsis;
	//     // white-space: nowrap;
	//     width: 104rpx;
	//     font-family: PingFang SC, PingFang SC;
	//     font-weight: 500;
	//     font-size: 26rpx;
	//     color: #FFFFFF;
	//     text-align: center;
	//     font-style: normal;
	//     text-transform: none;
	// }
	.shiJiFukuan {
		width: 112rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 560;
		font-size: 28rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.fuKuan {
		width: 72rpx;
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 560;
		font-size: 32rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.buttonClick {
		position: fixed;
		bottom: 0;
		margin-bottom: calc(24rpx + env(safe-area-inset-bottom));
		// border:1rpx solid black;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		justify-content: center;
		height: 94rpx;
		
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.buttonPay {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.pay1 {
		margin: 0 38rpx 0 46rpx;
		width: 120rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 560;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.pay2 {
		margin: 0 38rpx 0 46rpx;
		width: 110rpx;
		height: 36rpx;
		font-family: Douyin Sans, Douyin Sans;
		font-weight: bold;
		font-size: 30rpx;
		color: #EB5432;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.payPre {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 374rpx;
		height: 94rpx;
		background: #159DFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		// margin-right: 106rpx;
	}

	.button {

		width: 160rpx;
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>